@import "../base/color.scss";
@import "../base/mixin.scss";
@import "../base/eleUi.scss";


$menu-height: 60px;
.implant {
    width: 100%;
    height: 100%;
}
.top-menu {
    position: relative;
    width: 100%;
    height: $menu-height;
    background-color: $black_1;
    color: $white_1;
    display: flex;
    justify-content: center;
    align-items: center;

    .top-menu__info{
        position: absolute;
        left: 0;
        top: 0;
        width:  200px;
        height: $menu-height;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .top-menu__info--icon {
            font-size: 16px;
            margin-right: 4px;
        }
        .top-menu__info--text {
            font-weight: 600;
            font-size: 14px;
        }
    }
    .top-menu__help{
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 18px;
    }
    .top-menu__link {
        min-width: 110px;
        height: $menu-height;
        padding: 0 20px;
        line-height: $menu-height;
        font-weight:600;
        font-size:14px;
        &.checked {
            background:#242A3A;
            box-shadow:0px 10px 10px 0px rgba(0,0,0,0.03);
            border-bottom: 5px solid $blue_1;
            box-sizing: border-box;
        }
    }
    &.experienceMenuStyle{
        justify-content: flex-start;
        .experienceMenuStyle_btn{
            position: absolute;
            right: 87px;
            top: 12px;
        }
        .top-menu__info{
            position: relative;
            margin-right: 20px;
        }
        .top-menu__link{
            background:none;
            position:relative;
            overflow: hidden;
            padding:0 32px 0 0;
            div{
                background: #273761;
                height: 100%;
                position: relative;
                z-index: 2;
                padding: 0 20px 0 60px;
            }
            &:before{
                content: ' ';
                position: absolute;
                height:$menu-height;
                width:$menu-height;
                background: #273761;
                right: 13px;
                top: -1px;
                transform: rotate(45deg);
                z-index: 1;
            }
            &:after{
                content: ' ';
                position: absolute;
                height:$menu-height;
                width:$menu-height;
                background: #000;
                left: -41px;
                top: -1px;
                transform: rotate(45deg);
                z-index: 3;
            }
            &.checked{
                border:none;
                background: none;
                div{
                   background:#3370FF; 
                }
                &:before{
                   background:#3370FF;
                }
            }
        }
    }
}
.main {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
}
 .left-menu {
    width: 220px;
    flex: 0 0 220px;
    height: 100%;
    border: 1px solid $grey_1;
    padding: 14px;
    overflow-y: auto;
    .left-menu__link {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
        font-weight:600;
        border-radius:6px;
        &.router-link-active {
            background-color: #336CFB;
            color: $white_1;

        }
        .left-menu__icon {
            margin-right: 10px;
        }
    }
}

 .right-content {
    flex: 1 1 auto;
    height: 100%;
}
